<template>
  <div>
    <div style="display: flex">
      <h4 style="margin: 0;padding: 0">创建涂框格式</h4>
      <el-button
          :disabled="(!!setting && !!setting.target)"
          @click="() => {this.hiddenAddItem = !this.hiddenAddItem}" size="mini" type="text">
        {{ hiddenAddItem ? "显示" : "隐藏" }}
      </el-button>

    </div>
    <div v-show="!hiddenAddItem && !(setting && setting.target)">
      <el-form size="mini">
        <el-form-item style="margin-bottom: 5px" label="创建方式1:">
          <el-button
              :style="{
                                           color: model==='template' ? 'gray' : ''
                                           }"
              @click="changeModel('template')" type="text">
            {{ model === 'template' ? '请框选一个填涂区域' : '识别生产' }}
          </el-button>
        </el-form-item>

      </el-form>
      <el-form size="mini">
        <el-form-item style="margin-bottom: 5px" label="创建方式2:">
          <el-button type="text"
                     :style="{
                                           color: includesCreateSelectInEventList ? 'gray' : ''
                                           }"
                     @click="handCreateSelect">
            {{ includesCreateSelectInEventList ? "请点击答题卡任意地方创建/取消" : "手动创建" }}
          </el-button>
        </el-form-item>

        <el-form label-position="right" label-width="89px" size="mini" inline>
          <!--
                                          <el-form-item  style="margin-bottom: 5px" label="填涂方格高:">
                                              <el-input-number :precision="3" :step="0.5" v-model="createSelect.h" style="text-align: left" :min="1" :max="100"></el-input-number>

                                          </el-form-item>
                                          <el-form-item style="margin-bottom: 5px" label="填涂方格宽:">
                                              <el-input-number :precision="3" :step="0.5" v-model="createSelect.w" :min="5" :max="100"></el-input-number>
                                          </el-form-item>
                                          <el-form-item style="margin-bottom: 5px" label="方格间隔:">
                                              <el-input-number :precision="3" :step="0.5" v-model="createSelect.s" :min="5" :max="100"></el-input-number>
                                          </el-form-item>-->
          <el-form-item style="margin-bottom: 5px" label="方格数量:">
            <el-input-number v-model="createSelect.n" :min="1" :max="10"></el-input-number>
          </el-form-item>
          <el-form-item style="margin-bottom: 5px" label="方向:">
            <el-radio v-model="createSelect.f" label="h">横向</el-radio>
            <el-radio v-model="createSelect.f" label="s">竖向</el-radio>
          </el-form-item>
        </el-form>
      </el-form>
    </div>
    <h4 style="margin: 0;padding: 0">涂框列表</h4>
    <el-form size="mini" v-for="(item, index) in templateCache" :key="index" label-position="right" label-width="50px"
             inline>
      <div style="display: flex">
        <h5 style="">{{ index + 1 }}. 填涂格式({{ item.n }}选项 来自{{ item.ai ? '识别' : "手动" }})</h5>
        <el-button size="mini" type="text" v-show="item.target === setting.target" @click="overLookTemplate(item)">
          确定
        </el-button>
        <el-button type="text" v-show="!setting.target" :style="{color: includesCopyToPaperInEventList ? 'gray' : ''}"
                   :disabled="model === 'autoRectByTemplate'" @click="copyToPaper(item.target)">
          {{ includesCopyToPaperInEventList ? '停止复制' : '复制到试卷' }}
        </el-button>
        <el-button type="text" v-show="!setting.target"
                   :style="{color: model === 'autoRectByTemplate' ? 'gray' : ''}"
                   :disabled="includesCopyToPaperInEventList"
                   @click="changeModel('autoRectByTemplate', item)">
          {{ model === 'autoRectByTemplate' ? '请框选/点击结束' : '自动设置' }}
        </el-button>

        <el-button size="mini" type="text" v-show="!setting.target" @click="lookTemplate(item.target, true)">查看
        </el-button>
        <el-button size="mini" type="text" style="color: red" v-show="!setting.target"
                   @click="deleteTemplate(item.target)">删除
        </el-button>
      </div>

      <template v-if="setting && item.target === setting.target && !item.ai">
        <el-form-item style="margin-bottom: 5px" label="高:">
          <el-input-number :precision="3" :step="0.5" @change="settingChange('sh', $event)" :value="setting.sh"
                           style="width: 110px;text-align: left" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item style="margin-bottom: 5px" label="宽:">
          <el-input-number :precision="3" :step="0.5" @change="settingChange('sw', $event)" :value="setting.sw"
                           style="width: 110px;text-align: left" :min="5" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item style="margin-bottom: 5px" label="间隔:">
          <el-input-number :precision="3" :step="0.5" @change="settingChange('s', $event)" :value="setting.s"
                           style="width: 110px;text-align: left" :min="2" :max="100"></el-input-number>
        </el-form-item>
      </template>

    </el-form>
    <div v-if="templateCache.length === 0">请添加涂框格式</div>

  </div>
</template>

<script>
export default {
  props: [
    "templateCache",
    "setting",
    "includesCopyToPaperInEventList",
    "changeModel",
    "overLookTemplate",
    "handCreateSelect",
    "hiddenAddItem",
    "settingChange",
    "lookTemplate",
    "deleteTemplate",
    "model",
    "copyToPaper",
    "includesCreateSelectInEventList",

  ],
  name: 'createSelectItem',
  data: function () {
    return {
      createSelect: {
        w: 47,
        h: 16.5,
        s: 16,
        n: 10,
        f: 'h',
      },
    }
  },
  created() {
    console.log(this.createSelect)
  }

}
</script>
<style scoped>

</style>